<style lang="scss" scoped="">
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        color: #2d8cf0;
        background: #f0faff;
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after{
            background: #2d8cf0;
    }
    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover{
        color: #2d8cf0;
    }
    .ivu-tabs-bar{
        margin-bottom: 10px;
    }
    .ivu-menu-light{
        &:after {
            height: 0px !important;
        }
    }
    .test{
        width: 100%;
        height: 700px;
    }
    .ivu-tabs-no-animation > .ivu-tabs-content{
        background-color:rgb(243,243,243);
        height: 100%;
        overflow-y: auto;
        // padding-top: 10px;
    }
    .ivu-tabs-nav{
        top:10px;
        padding-left:15px;
    }
    .ivu-tabs .ivu-tabs-tabpane{
        width:100%;
        // height: 400px;
        margin:auto;
        // overflow-y: hidden;
        // padding-bottom: 20px;
    }
    .ivu-tabs-nav-scroll{//tab头
        background-color:white;
        height:50px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-bottom: 1px solid #dcdee2;
        border-radius: 4px 4px 4px 4px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container{
        height:50px;
    }
</style>

<template>
    <mcontent>
        <template slot="left">
            <Menu  :active-name="activeName" theme="light" width=""  class="ivu-menu-light" @on-select="changeMenu">
                <MenuItem name="config_sys" v-if="this.$hasPerm('sysList')">
                    <Icon type="md-contacts" size="16"/>业务系统配置
                </MenuItem>
                <!-- <MenuItem name="config_user" v-if="this.$hasPerm('userList')">
                    <Icon type="md-people" size="16"/>用户配置
                </MenuItem>
                <MenuItem name="config_project" v-if="this.$hasPerm('projectList')">
                    <Icon type="md-cloud" size="16"/>项目配置
                </MenuItem> -->
            </Menu>
        </template>
        <template slot="right">
            <component :is="showPage"></component>
        </template>
    </mcontent>
</template>
<script>
    import mcontent from "../comp_chatter/mcontent"
    import { mapMutations } from 'vuex';
    import Axios from 'axios'
    import ajax from "../ajax_util"
    import * as types from '../store/types'
    // import project from "../comp_user/project"
    // import user from "../comp_user/user"
    // import role from "../comp_user/role"

    import sys from "../comp_business/sys"

    export default {
        data () {
            return{
                // activeName: "config_project",
                // showPage: "project"
                activeName: "config_sys",
                showPage: "sys"
            }
        },
        components:{
            // project,user,role,
            sys,mcontent
        },
        created:function(){
            // this.$store.commit(types.TITLE, 'logout')
        },
        methods:{
            changeMenu(name) {
                if (name == 'config_sys') {
                    // this.$router.push({ path:'/role' })
                    this.showPage = "sys"
    //             } else if (name == 'config_user') {
    //                 this.showPage = "user"
                    // this.$router.push({ path:'/user'})
    //             } else if(name == 'config_project') {
    //                 this.showPage = "project"
                    //this.$router.push({ path:'/project'})
                }
             },
            getPageList(page){
                alert(page)
            },
            search(){
                alert(this.processid)
            }
        }
    }
</script>
